<template>
  <div class="content">
    <h3 class="aqi-overview-detail__section-title">
      <font style="vertical-align: inherit"
      ><font style="vertical-align: inherit">在过去</font></font
      >
    </h3>
    <div id="chartLineBox" style="width: 90%;height: 70vh;"> </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {mapState} from "vuex";

export default {
  data() {
    return {
      xTimeData: [],
      coData: [],
      so2Data: [],
      PMData: [],
    }
  },
  mounted(){
    this.makeDate()
    this.getChart()
  },
  methods: {
    makeDate() {
      const _this = this
      this.cityAirInfo.forEach(function (city) {
        _this.xTimeData.push(city.createTime)
        _this.coData.push(city.co)
        _this.so2Data.push(city.so2)
        _this.PMData.push(city.pm25)
      })

    },
    getChart() {
      this.chartLine = echarts.init(document.getElementById('chartLineBox'));

      // 指定图表的配置项和数据
      var option = {
        tooltip: {              //设置tip提示
          trigger: 'axis'
        },

        legend: {               //设置区分（哪条线属于什么）
          data:['一氧化碳','二氧化硫', 'PM2.5']
        },
        color: ['#009ACD', '#00E5EE', '#836FFF'],       //设置区分（每条线是什么颜色，和 legend 一一对应）
        xAxis: {                //设置x轴
          type: 'category',
          boundaryGap: false,     //坐标轴两边不留白
          data: this.xTimeData,
          name: 'DATE',           //X轴 name
          nameTextStyle: {        //坐标轴名称的文字样式
            color: '#080808',
            fontSize: 16,
            padding: [0, 0, 0, 20]
          },
          axisLine: {             //坐标轴轴线相关设置。
            lineStyle: {
              color: '#080808',
            }
          }
        },
        yAxis: {
          name: 'DATA LADDER',
          nameTextStyle: {
            color: '#080808',
            fontSize: 16,
            padding: [0, 0, 10, 0]
          },
          axisLine: {
            lineStyle: {
              color: '#080808',
            }
          },
          type: 'value'
        },
        series: [
          {
            name: '一氧化碳',
            data:  this.coData,
            type: 'line',               // 类型为折线图
            lineStyle: {                // 线条样式 => 必须使用normal属性
              normal: {
                color: '#009ACD',
              }
            },
          },
          {
            name: '二氧化硫',
            data: this.so2Data,
            type: 'line',
            lineStyle: {
              normal: {
                color: '#00E5EE',
              }
            },
          },
          {
            name: 'PM2.5',
            data: this.PMData,
            type: 'line',
            lineStyle: {
              normal: {
                color: '#836FFF',
              }
            },
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      this.chartLine.setOption(option);
    }
  },
  computed: {
    ...mapState("detail", { cityAirInfo: "detailCityInfo"}),
  },
}
</script>

<style lang="less" scoped>
  .content{
    width: 100%;
    //height: 446px;
    border-radius: 4px;
    box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.08);
    background-color: #fff;
    padding: 24px;
    margin-bottom: 24px;
  }
  .aqi-overview-detail__section-title {
    margin-bottom: 8px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: #499fbc;
  }
</style>